<template>
  <div class="news">
    <el-button @click="add">新增分类</el-button>
    <!-- <table border="1px" width="100%">
      <tr>
        <th>分类名称</th>
        <th>序号</th>
        <th>操作</th>
      </tr>
      <tr v-for="(item, index) in data" :key="index">
        <td>{{ item.name }}</td>
        <td>{{ item.sort }}</td>
        <td>
          <span class="span" @click="onShow(item)"> 编辑 </span>---<span
            class="span"
            @click="remove(index)"
          >
            删除</span
          >
        </td>
      </tr>
    </table> -->
    <el-table :data="data" style="width: 100%">
      <el-table-column prop="name" label="分类名称" width="180">
      </el-table-column>
      <el-table-column prop="sort" label="序号" width="180"> </el-table-column>
      <el-table-column prop="address" label="操作">
        <template slot-scope="scope"
          ><span class="span" @click="onShow(scope.row)"> 编辑 </span>---<span
            class="span"
            @click="remove(scope.row.id)"
          >
            删除</span
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 编辑 -->
    <el-dialog title="编辑分类" :visible.sync="show">
      <el-form :model="form">
        <el-form-item label="分类名称" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="排序" :label-width="formLabelWidth">
          <el-input-number
            v-model="form.nums"
            controls-position="right"
            @change="handleChange"
            :min="1"
            :max="10"
          ></el-input-number>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="show = false">取 消</el-button>
        <el-button type="primary" @click="yes">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
      <span>确认删除？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="shanchu">确 定</el-button>
      </span>
    </el-dialog>

    <!--    新增 -->
    <el-dialog title="新增分类" :visible.sync="shows">
      <el-form :model="form" :rules="rules">
        <el-form-item
          label="活动名称"
          :label-width="formLabelWidth"
          prop="name"
        >
          <el-input v-model="form.addName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="序号" :label-width="formLabelWidth" prop="name">
          <el-input-number
            v-model="form.addSort"
            controls-position="right"
            @change="handleChange"
            :min="1"
            :max="10"
          ></el-input-number>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="shows = false">取 消</el-button>
        <el-button type="primary" @click="adds">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getBanner, login } from "../../../api.js";
import { getBanne } from "../../../api.js";
import { getBanners } from "../../../api.js";
import { add } from "../../../api.js";
export default {
  data() {
    return {
      dialogVisible: false,
      data: [],
      shows: false,
      show: false,
      dialogTableVisible: false,
      dialogFormVisible: false,
      form: {
        id: "",
        name: "",
        nums: 1,
        delivery: false,
        type: [],
        resource: "",
        desc: "",
        addName: "",
        addSort: "",
      },
      formLabelWidth: "120px",
      clickId: "",
      it: "",
      rules: {
        name: [{ required: true, message: "请输入活动名称", trigger: "blur" }],
      },
    };
  },
  mounted() {
    getBanner().then((res) => {
      console.log(res);
      this.data = res.data;
    });
  },
  methods: {
    handleChange(value) {
      console.log(value);
    },
    //编辑
    onShow(item) {
      console.log(item);
      this.show = true;
      this.form.name = item.name;
      this.form.nums = item.sort;
      this.form.id = item.id;
      this.it = item;
    },
    yes() {
      // this.data.forEach((item) => {
      //   if (item.id == this.it.id) {
      //     item.create_user = this.form.name;
      //     item.sort = this.form.nums;
      //   }
      // });

      this.it.name = this.form.name;

      getBanners(this.form.id, this.it).then((res) => {});
      this.show = false;
    },
    remove(id) {
      this.dialogVisible = true;
      this.clickId = id;
    },
    shanchu() {
      getBanne(this.clickId).then((res) => {
        // console.log(res);
        getBanner().then((res) => {
          // console.log(res);
          this.data = res.data;
        });
      });
      this.dialogVisible = false;
    },
    add() {
      this.shows = true;
    },
    adds() {
      add({
        name: this.form.addName,
        parent_id: 0,
        sort: this.form.addSort,
      }).then((res) => {
        console.log(res);
        this.shows = false;
        getBanner().then((res) => {
          console.log(res);
          this.data = res.data;
        });
      });
    },
  },
};
</script>

<style lang="scss">
.span {
  color: blue;
}
.add {
  color: white;
  background-color: blue;
}
.news {
  table {
    tr {
      text-align: center;
    }
  }
}
</style>
